{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<style type="text/css">
    #copy{display: none}
    .usersignin-list{overflow: auto;padding: 0 20px;height: calc(100vh - 250px);}
    .usersignin-list .item{padding:16px 0;position: relative;border-bottom: 1px dashed #eee;}
    .usersignin-list .item .details{display: inline-block;margin-left: 10px;vertical-align: middle;}
    .usersignin-list .item .time{float: right;color: #777;font-size: 12px;text-align: right;}
</style>
</style>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            {include file="user/site"}
            <el-card class="box-card content">
                <div slot="header" class="search">
                    <el-button type="primary" size="small" @click="signinClick()" :disabled="signin">
                        {{signin ? '签到成功' : '点击签到'}}
                    </el-button>
                </div>
                <div class="usersignin-list" v-infinite-scroll="list" :infinite-scroll-disabled="disabled">
                    <div class="item" v-for="(item, index) in data">
                        <div class="details" style="color: #67C23A">积分+{{item.integral}}</div>
                        <div class="time">{{item.create_time}}</div>
                    </div>
                    <div v-if="loading" class="el-loader">加载中...</div>
                    <div v-if="noMore && loading === false" class="el-nomore">没有更多啦</div>
                </div>
            </el-card>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                data: [],
                search:{
                    page: 1,
                },
                loading: false,
                signin: false,
                signinLoading: false,
            }
        },
        computed: {
            noMore() {
                return this.count <= this.data.length;
            },
            disabled() {
                return this.loading || this.noMore;
            }
        },
        methods: {
            /**
             * 加载列表
             */
            list() {
                let self = this;
                self.loading = true;
                post('api/usersignin/user/index', self.search, function (res) {
                    if (res.status === 'success') {
                        self.search.page++;
                        self.data   = self.data.concat(res.data);
                        self.count  = res.count;
                        self.signin = res.signin;
                    }
                    self.loading = false;
                })
            },
            /**
             * 点击签到
             */
            signinClick() {
                let self = this;
                self.signinLoading = true;
                post('api/usersignin/user/signin', {}, function (res) {
                    if (res.status === 'success') {
                        self.signin      = true;
                        self.data        = [];
                        self.search.page = 1;
                        self.list();
                    }
                    self.signinLoading = false;
                })
            },
        },
    });
</script>
</body>
</html>